<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值和指令</title>
    <script src="./vue.js"></script>
</head>
<body>

<div id="app">
    <!--插值-->
    <p>{{message}}</p>
    <!--指令-->
    <!--v-bind:[属性名称]-->
    <p>
        <a v-bind:href="url">跳转百度</a>
    </p>
    <!--指令的简写-->
    <p>
        <img :src="srcPath" width="200px" alt="">
    </p>
    <!--自定义属性-->
    <p :custom="val"></p>
    <!-- v-on: 事件绑定 -->
    <button @click="_click">点击</button>
    <!-- v-if: v-show:  -->

    <hr>
    <button @click="hide=!hide">显示/隐藏</button>
    <!--本就不需要渲染的数据-->
    <div v-if="hide">
        {{message}}
    </div>
    <!--用户交互-->
    <div v-show="hide">
        {{message}}
    </div>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            message: 'hello',
            url: 'https://www.baidu.com',
            srcPath: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597377555742&di=80eeabdbc929852d279450581b40f60c&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201508%2F14%2F20150814175427_2jWPV.jpeg',
            val: 'custom',
            hide: false
        },
        methods: {
            _click: function () {
                console.log('click')
            }
        }
    })
</script>

</body>
</html>